<template>
  <view class="containers">
    <view class="loginOut-bt" v-if="ifLogin">
      <!-- 头像 昵称 -->
      <view class="person_info" v-if="ifLogin">
        <view class="info-box">
          <image
            class="avatar-img"
            @tap="previewImage"
            :data-src="userInfo.headimgurl"
            :src="userInfo.headimgurl"
          />
          <text class="nick-name" @tap="goToStatusPage">{{
            userInfo.nickname
          }}</text>
        </view>
      </view>

      <!-- 订单 优惠券 -->
      <view class="controls-box" style="display: none">
        <view class="controls-item" bindtap="ordersClick">
          <view class="order-bg">
            <image class="order-img" src="../../static/images/order.png" />
          </view>
          <view class="controls-name">我的订单</view>
        </view>

        <view class="controls-item" bindtap="couponClick">
          <view class="coupon-bg">
            <image class="coupon-img" src="../../static/images/coupon.png" />
          </view>
          <view class="controls-name"
            >优惠券 <text class="coupon-num">(4)</text></view
          >
        </view>
      </view>

      <!-- 新增cell单元格 -->
      <!-- <van-cell-group
        :border="false"
        :inset="true"
        custom-class="custom-group-class"
        style="width: 100%"
      > -->
      <!-- <van-cell>
        <view slot="icon" class="my-icon-img order">
          <image class="icon-img" src="../../static/my/wallet3.png" />
        </view>
        <view slot="title">
          <view class="van-cell-text">余额：¥ {{userInfo.balance}}</view>
        </view>
      </van-cell> -->

      <!-- <van-cell
          :border="false"
          is-link
          custom-class="custom-cell-class"
          url="/pages/wallet/wallet"
          class="my-cell-group"
        >
          <view slot="icon" class="my-icon-img order">
            <image class="icon-img" src="/static/my/wallet3.png" />
          </view>
          <view slot="title">
            <view class="van-cell-text">我的钱包</view>
          </view>
        </van-cell> -->

      <!-- <van-cell
          :border="false"
          is-link
          custom-class="custom-cell-class"
          url="/pages/sysAddMyCar/sysAddMyCar"
          :value="carNum || '完善车主信息'"
          class="my-cell-group"
        >
          <view slot="icon" class="my-icon-img order">
            <image class="icon-img" src="/static/my/ic_car.png" />
          </view>
          <view slot="title">
            <view class="van-cell-text">车辆管理</view>
          </view>
        </van-cell> -->

      <!-- <van-cell
          is-link
          custom-class="custom-cell-class"
          class="my-cell-group"
          @tap.native="ordersClick"
        >
          <view slot="icon" class="my-icon-img order">
            <image class="icon-img" src="/static/my/ic_order.png" />
          </view>
          <view slot="title">
            <view class="van-cell-text">我的订单</view>
          </view>
        </van-cell> -->

      <!-- <van-cell
          :border="false"
          is-link
          custom-class="custom-cell-class"
          @tap.native="
            clearCache($event, { url: '/pages/orderList/orderList' })
          "
          data-url="/pages/orderList/orderList"
          class="my-cell-group"
        >
          <view slot="icon" class="my-icon-img clear">
            <image class="icon-img" src="/static/my/ic_clear.png" />
          </view>
          <view slot="title">
            <view class="van-cell-text">清空缓存</view>
          </view>
        </van-cell> -->
      <!-- <van-cell
          :border="false"
          is-link
          custom-class="custom-cell-class"
          @tap.native="loginOut"
          class="my-cell-group"
          v-if="ifLogin"
        >
          <view slot="icon" class="my-icon-img clear">
            <image class="icon-img" src="/static/my/ic_exit.png" />
          </view>
          <view slot="title">
            <view class="van-cell-text">退出登录</view>
          </view>
        </van-cell> -->
      <!-- </van-cell-group> -->
      <!-- 改用uniapp -->
      <uni-list style="width: 100%" :border="false">
        <!-- <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" /> -->
        <uni-list-item
          :border="false"
          title="我的钱包"
          showArrow
          thumb="/static/my/wallet3.png"
          thumb-size="base"
          link
          to="/pages/wallet/wallet"
        />

        <uni-list-item
          title="车辆管理"
          showArrow
          thumb="/static/my/ic_car.png"
          thumb-size="base"
          :rightText="carNum || '完善车主信息'"
          link
          to="/pages/sysAddMyCar/sysAddMyCar"
        />
        <uni-list-item
          title="我的订单"
          showArrow
          thumb="/static/my/ic_order.png"
          thumb-size="base"
          link="switchTab"
          to="/pages/orderList/orderList"
        />
        <uni-list-item
          clickable
          @click="clearCache($event, { url: '/pages/orderList/orderList' })"
          title="清空缓存"
          showArrow
          thumb="/static/my/ic_clear.png"
          thumb-size="base"
        />
        <uni-list-item
          clickable
          @click="loginOut"
          title="退出登录"
          showArrow
          thumb="/static/my/ic_exit.png"
          thumb-size="base"
        />
      </uni-list>
      <!-- <button wx:if="{{ifLogin}}" class="exitLogin" type="primary" bindtap="loginOut">退出登录</button> -->
      <!-- parse <template is="versionInfo" :data="versionCode,times"></template> -->
      <!-- <block name="versionInfo">
        <view class="versionInfo">
          <text class="versionName"
            >当前版本: {{ versionCode }}{{ times }}</text
          >
        </view>
      </block> -->
    </view>

    <!-- <van-dialog id="van-dialog" confirm-button-color="#FF8100" /> -->
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        :type="msgType"
        cancelText="取消"
        confirmText="确认"
        title="提示"
        content="确定要退出吗"
        @confirm="dialogConfirm"
      ></uni-popup-dialog>
    </uni-popup>
    <TabBarCus pageName="sysUserInfo" />
  </view>
</template>

<script>
import TabBarCus from "../../components/TabBarCus.vue";
// import Dialog from '@vant/weapp/dialog/dialog';
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
let inputD = 0;
export default {
  components: { TabBarCus },
  data() {
    return {
      gobugo: true,
      ifLogin: false,
      version: app.globalData.version,
      versionCode: 'V' + app.globalData.version,
      times: '',
      purePhoneNumber: '',
      carNum: '',
      userInfo: {
        headimgurl: '',
        nickname: '',
        balance: ''
      },
      avatarUrl: defaultAvatarUrl,
      canIUseGetUserProfile: false
    };
  }, //全局的数据共享（tabbar）
  // mixins: [storeBindingsBehavior],
  onLoad: function () {
    this.initLoad()
  },
  onShow: function () {
    uni.hideTabBar()
    // 进入页面修改自定义选中
    // this.updateActive(4);
    var purePhoneNumber = Store.getItem('purePhoneNumber');
    var carNum = Store.getItem('carNum');
    if (uni.getUserProfile) {
      // this.setData({
      this.canIUseGetUserProfile = true,
        this.purePhoneNumber = purePhoneNumber,
        this.carNum = carNum
      // });
    }
    // this.setData({
    this.ifLogin = Store.getItem('ifLogged'),
      this.version = app.globalData.version
    if (!this.ifLogin) {
      this.initLoad()
    }
    // });
  },
  methods: {
    initLoad() {
      const user_id = Store.getItem('user_id');
      if (!user_id) {
        //重新获取用户信息 否则前往登录
        if (this.gobugo) {
          // this.setData({
          this.gobugo = false
          // });
          uni.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 2000
          });
          setTimeout(function () {
            uni.redirectTo({
              url: '../sysLogin/sysLogin?pay_source=TABBAR_MINE'
            });
          }, 1000);
        }
      } else {
        this.getUserDetail(user_id);
      }
    },
    //1 通过userid 请求用户信息
    getUserDetail: function (userId) {
      const signObject = {
        userId
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.getUserByUserId, {
          userId,
          sign: signvalue
        })
        .then((res) => {
          // this.setData({
          this.userInfo = {
            headimgurl: res.list.headimgurl,
            nickname: res.list.nickname,
            balance: res.list.balance
          },
            this.purePhoneNumber = res.list.phone
          this.carNum = res.list.plate
          // });
          Store.setItem('purePhoneNumber', res.list.phone);
          Store.setItem('carNum', res.list.plate);
          Store.setItem('balance', res.list.balance);
        })
        .catch((e) => {
          console.log(e);
        });
    },

    //2 预览头像
    previewImage(e) {
      const current = e.target.dataset.src;
      uni.previewImage({
        current: current,
        //当前显示图片的http链接
        urls: [current] //需要预览的图片http链接列表
      });
    },

    //3 跳转到充电桩状态页面
    goToStatusPage() {
      inputD++;
      if (inputD > 2) {
        console.log(inputD);
        inputD = 0;
        uni.redirectTo({
          url: '../sysCheck/sysCheck'
        });
      }
    },

    //4 订单列表
    ordersClick: function () {
      const user_id = Store.getItem('user_id');
      if (user_id) {
        uni.switchTab({
          url: '/pages/orderList/orderList'
        });
      } else {
        uni.showToast({
          title: '请登录!',
          icon: 'none'
        });
      }
    },

    //5 优惠券
    couponClick: function () {
      const user_id = Store.getItem('user_id');
      if (user_id) {
        uni.navigateTo({
          url: '../sysCoupon/sysCoupon'
        });
      } else {
        uni.showToast({
          title: '请登录!',
          icon: 'none'
        });
      }
    },

    //6 清空缓存
    clearCache() {
      /* ---处理dataset begin--- */
      // this.handleDataset(e, _dataset);
      /* ---处理dataset end--- */
      Store.clear();
      // this.setData({
      this.ifLogin = false
      // });
      //刷新 跳转
      // app.appGetOpenId(); 
      app.globalData.appGetOpenId();
      uni.showLoading({
        title: '处理中',
        mask: true
      });
      if (!this.ifLogin) {
        setTimeout(function () {
          uni.hideLoading();
          uni.reLaunch({
            url: '/pages/index/index'
          });
        }, 1500);
      }
    },

    //7 退出登录
    loginOut() {
      this.$refs.alertDialog.open()
    },
    dialogConfirm() {
      // on confirm
      // Store.setItem('user_id', null);
      // Store.setItem('ifLogged', false);
      Store.clear('user_id');
      Store.clear('ifLogged');
      uni.switchTab({
        url: '/pages/index/index'
      });
      this.userInfo = {},
        this.ifLogin = false

    },
  }
};
</script>
<style>
@import "./sysUserInfo.css";
</style>
